<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title></title>

    <link href="../plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
    <link href="../plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="../plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <link href="../plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
    <link href="../plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css"/>

    <link href="../css/common.css" rel="stylesheet"/>
</head>

<body>
<div id="main" style="    padding:0px 10px;">
        <div class="panel panel-default" style="margin: 0px 0px 0px 0px ">
                <div class="panel-body">
                    <div class="row" style="margin-top: 10px;margin-left: 0px;margin-bottom: 14px">
                        <div class="col-xs-12 col-sm-4" style="margin-top: 5px">
                            <select id="select" style="    height: 36px;
                                  float: left;
                                  margin-right: 10px;
                                  border-radius: 4px;">
                                <option value="">订单类型-全部</option>
                                <option value="单次">单次</option>
                                <option value="包天">包天</option>
                                <option value="包周">包周</option>
                                <option value="半月">半月</option>
                                <option value="包月">包月</option>
                            </select>
                            <select id="select_status" style="    height: 36px;
                                  float: left;
                                  margin-right: 10px;
                                  border-radius: 4px;">
                                <option value="">订单状态-全部</option>
                                <option value="0">正常</option>
                                <option value="1">暂停</option>
                                <option value="2">已取消</option>
                            </select>

                        </div>
                        <div class="col-xs-12 col-sm-4"style="margin-top: 5px">
                            <input type="text" class="form-control" style="width: 120px;float: left; margin-right: 10px" placeholder="结束时间" id="eDate" name="eDate" value=""  >

                            <input type="text" class="form-control" style="width: 120px;float: left;" placeholder="房间号 备注" id="roomid" value="" >

                        </div>
                        <div class="col-xs-12 col-sm-4"style="margin-top: 5px">
                            <button type="button" class="col-sm-1 btn btn-danger btn-sm" style="margin-left: 15px;float:none;width: 58px;float: left;" onclick="_queryData();">查询
                            </button>
                        </div>
                    </div>


                </div>
            </div>
    <table id="tableGoodsValue" ></table>
    <div class="ta-line"></div>
    <div style="height: 50px">&nbsp</div>
</div>
<script src="../plugins/jquery.1.12.4.min.js"></script>
<script src="../plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="../plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
<script src="../plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../plugins/waves-0.7.5/waves.min.js"></script>
<script src="../plugins/jquery-confirm/jquery-confirm.min.js"></script>

<script src="../js/bootstrap-table-super-search.js"></script>
<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>


<script src="../js/common.js"></script>
<script>


    var $table = $('#tableGoodsValue');
    var datatable;
    $(function() {
        $(document).on('focus', 'input[type="text"]', function() {
            $(this).parent().find('label').addClass('active');
        }).on('blur', 'input[type="text"]', function() {
            if ($(this).val() == '') {
                $(this).parent().find('label').removeClass('active');
            }
        });
        // bootstrap table初始化
        datatable= $table.bootstrapTable({
            url: '/user/get/transactionRecord?id='+localStorage.getItem('id'),
            method:'get',
            striped: true,
            queryParams : function(params) {
                params.select= $("#select").val();
                params.eDate = $("#eDate").val();
                params.select_status=$("#select_status").val();
                params.roomId=$("#roomid").val();
                params.offset=params.offset;
                params.type=QueryString("type");
                return params
            },
            search: false,
            searchOnEnterKey: true,
            superSearch:false,
            showColumns: false,
            minimumCountColumns: 2,
            clickToSelect: true,
            detailFormatter: 'detailFormatter',
            pagination: true,
            paginationLoop: false,
            classes: 'table table-hover ',
            sidePagination: 'server',
            smartDisplay: true,
            idField: 'id',
            uniqueId:'id',
            escape: true,
            showRefresh:true,
            showToggle:true,
            toolbar: '#toolbar',
            columns: [
               
                 {field: 'id', title: 'ID', align: 'center'},
                {field: 'username', title: '用户名', align: 'center'},
                {field: 'goods', title: '商品', align: 'center'},
                {field: 'price', title: '消耗积分', align: 'center'},
                {field: 'coin', title: '剩余积分', align: 'center'},
                {field: 'room', title: '房间ID', align: 'center'},
                {field: 'num', title: '数量', align: 'center'},
                {field: 'createAt', title: '购买时间', align: 'center',formatter: 'dateFormatter'},
                {field: 'endDate', title: '结束时间', align: 'center',formatter: 'dateFormatter'},
                {field: 'status', title: '状态', align: 'center',formatter: 'dateFormatter2'},
                {field: 'remark', title: '备注', align: 'center',formatter: 'dateFornullr'},
                {field: 'action', title: '操作', align: 'center', formatter: 'ntActionFormatter', events: 'nameActionEvent', clickToSelect: false},

            ],
        }).on('all.bs.table', function (e, name, args) {
            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();
        });
        $("#eDate").datepicker('remove');
        $("#eDate").datepicker({
            startView: 0,
            maxViewMode: 1,
            minViewMode: 0,
            language: 'zh-cn',
            format: 'yyyy-mm-dd',
            autoclose: true
        });
        // //获取网页正文全文宽
        // var screenWidth = document.body.scrollWidth ;
        // if(screenWidth <= 960){
        //     $('#tableGoodsValue').css('width',600)
        //     datatable.bootstrapTable('resetView')
        // }
    });
    function _queryData(){
        datatable.bootstrapTable('refresh');
    }
     function ntActionFormatter(value, row, index) {
          return [

              '<a class="edit ml10" href="javascript:void(0)" data-toggle="tooltip" title="修改"><i class="glyphicon glyphicon-edit">编辑</i></a>'
          ].join('');


     }
    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }
    function dateFormatter(value, row, index) {
        return formatDate(new Date(value/1),"yyyy-MM-dd hh:mm:ss");
    }
    function dateFormatter2(value, row, index) {
        if(value==0){
            value='正常'
        }else if(value==1){
            value='暂停'
        }else {
            value='订单已取消'
        }
        return value
    }

     window.nameActionEvent= {
         'click .edit': function (e, value, row, index) {
             var ck1,ck2=""
             if(row.status==0){
                 ck1="checked"
                 ck2=""
             }else{
                 ck1=""
                 ck2="checked"
             }
             $.confirm({
                 title: '修改订单',
                 content: '    <div class="form-group">\n' +
                     '        <label>房间号：</label>\n' +
                     '        <input type="text" value="' + row.room + '" placeholder="' + row.room + '" class="groom form-control">\n' +
                     '    </div>'+
                     '    <div class="form-group">\n' +
                     '        <label>房间状态：</label>\n' +
                     '  <label class="radio-inline">\n' +
                     '        <input type="radio" name="status'+row.Id+'" id="" value="0" '+ck1+'>正常' +
                     '    </label>\n' +
                     '    <label class="radio-inline">\n' +
                     '        <input type="radio" name="status'+row.Id+'" id=""  value="1" '+ck2+'> 暂停' +
                     '    </label>' +
                     '    </div>'+
                     '    <div class="form-group">\n' +
                     '        <label>备注：</label>\n' +
                     '        <input type="text" value="' + row.remark + '"  placeholder="' + row.remark + '" class="gremark form-control">\n' +
                     '    </div>',
                 buttons: {
                     confirm: {
                         text: '修改',
                         action: function () {

                             let groom = this.$content.find('.groom').val();
                             let status = this.$content.find('input[name="status'+row.Id+'"]:checked').val();
                             let remark = this.$content.find('.gremark').val();

                             $.ajax({
                                 url: '/user/get/transactionRecord_change',
                                 type: 'get',
                                 data: {Id: row.id, room: groom,status: status,remark: remark,type:QueryString("type")},
                                 success: function (json) {
                                     $.alert({
                                         content: '修改成功！',
                                         title: false,
                                         closeIcon: false
                                     });
                                     datatable.bootstrapTable('refresh');
                                 },
                                 error: function (error) {
                                     console.log(error);
                                 }
                             });
                         }
                     },
                     cancel: {
                         text: '取消'
                     }
                 }
             });
         },
         'click .edit2': function (e, value, row, index) {
             $.confirm({
                 title: '消息提醒',
                 content: '  是否上号',
                 buttons: {
                     confirm: {
                         text: '确定',
                         action: function () {
                             $.alert({
                                 content:'上号成功！',
                                 title:false,
                                 closeIcon:false
                             });

                         }
                     },
                     cancel: {
                         text: '取消'
                     }
                 }
             });
         }
     }
    function dateFornullr(value, row, index) {
        if(value=="null"){
            value=''
        }
        return value
    }

    function QueryString(val)
    {
        var uri = window.location.search;
        var re = new RegExp("" + val + "\=([^\&\?]*)", "ig");
        return ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 1)) : null);
    }
    function changeId(Id){
        if($("#room"+Id).val()==""){
            alert("请填写正确房间ID")
        }
        $.ajax({
        url: '/user/get/transactionRecord_changeId',
        type: 'get',
        data: {
            newid:$("#room"+Id).val(),
            remark:$("#textarea"+Id).val(),
            Id:Id, type:QueryString("type")
        },
        success: function(json){
                if(json.msg=="ok"){
                    datatable.bootstrapTable('refresh');
                }
        },
        error: function(error){
            console.log(error);
            localStorage.clear();
            location.href='/login';
        }
    });
    }
</script>
</body>
</html>